import React, {FC, useState} from "react";
import LoginWarp from "@pages/login/login.tsx";
import RegisterWarp from "@pages/login/register.tsx";


const Login: FC = () => {
    const [isLogin, setIsLogin] = useState(true);  // 控制登录和注册表单的切换
    const [afterStyles, setAfterStyles] = useState({
        left: "50%",
        top: "0",
    });  // 控制#after的位置
    const [buttonStyles, setButtonStyles] = useState({
        left: "0px",
    });  // 控制按钮的位置

    const login = () => {
        setIsLogin(true);  // 显示登录表单
        setAfterStyles({
            left: "50%",
            top: "0",
        });
        setButtonStyles({
            left: "0px",
        });
    };

    const register = () => {
        setIsLogin(false);  // 显示注册表单
        setAfterStyles({
            left: "0",
            top: "0",
        });
        setButtonStyles({
            left: "110px",
        });
    };

    return (
        <div className="login_warp">
            <div className="main-box">
                <div className="form-box">
                    <div
                        id="after"
                        style={{left: afterStyles.left, top: afterStyles.top}}
                    ></div>
                    <div className="login_button_warp">
                    <div id="btn" style={{ left: buttonStyles.left }}></div>
                        <button
                            id="log"
                            type="button"
                            className="toggle-btn"
                            style={{
                                color: isLogin ? "#252525" : "rgb(234, 234, 235)",
                            }}
                            onClick={login}
                        >
                            登录
                        </button>
                        <button
                            type="button" className="toggle-btn"
                            style={{
                                color: isLogin ? "rgb(234, 234, 235)" : "#252525",
                            }}
                            onClick={register}
                        >
                            注册
                        </button>
                    </div>
                    <div className="login_platform_icons">
                        <a className="icon-link" href="#">
                            <i className="fab fa-facebook cont-icon"></i>
                        </a>
                        <a className="icon-link" href="#">
                            <i className="fab fa-instagram cont-icon"></i>
                        </a>
                        <a className="icon-link" href="#">
                            <i className="fab fa-github cont-icon"></i>
                        </a>
                    </div>
                    {isLogin ? (
                        <LoginWarp></LoginWarp>
                    ) : (
                        <RegisterWarp></RegisterWarp>
                    )}
                </div>
                <span className="sp sp-t"></span>
                <span className="sp sp-r"></span>
                <span className="sp sp-b"></span>
                <span className="sp sp-l"></span>
            </div>
        </div>
    );
};

export default Login;
